import React, { Component } from 'react'
import { Button, Table, Form, Modal, Input, Select, Row, Col, Popconfirm, Icon, Checkbox } from 'antd'
import * as fetch from '../../utils/http'
const { Option } = Select;

class DeviceTagPage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            visibleTagModal: false,
            modalTitle: '新建标签',
            currentTag: {
                deviceID: '',
                deviceItemPropertyID: '',
                tag: ''
            },
            deviceList: [],
            tagList: [],
            signalList: [],
            searchValues: {
                deviceName: '',
                deviceItemPropertyName: ''
            },
            pageIndex: 1,
            pageSize: 10
        }
        this.getAllTag()
        this.getAllDevice()
        this.getAllSignal()
    }

    getAllTag() {
        const { searchValues, pageIndex, pageSize } = this.state
        const params = {
            ...searchValues,
            pageIndex,
            pageSize
        }
        fetch.get('Tag/GetTags', params).then(res => {
            console.log(res);
            this.setState({
                tagList: res.data.list || [],
                totalList: res.data.total
            })
        })
    }

    getAllDevice() {
        fetch.get('Device/GetDevices').then(res => {
            this.setState({
                deviceList: res.data || []
            })
        })
    }

    getAllSignal() {
        fetch.get('DeviceItemProperty/GetDeviceItemPropertys').then(res => {
            this.setState({
                signalList: res.data || []
            })
        })
    }

    newTag() {
        this.setState({
            currentTag: {
                deviceID: '',
                deviceItemPropertyID: '',
                tag: ''
            },
            modalTitle: '新建标签',
            visibleTagModal: true
        })
    }


    searchValueChange(e, field) {
        const { searchValues } = this.state
        searchValues[field] = e.target.value
        this.setState({
            searchValues
        })
    }

    onEditTag(currentTag) {
        this.setState({
            currentTag,
            modalTitle: '编辑标签',
            visibleTagModal: true
        })
    }

    onTableChange(e) {
        const { current } = e;
        console.log(current)
        this.setState({
            pageIndex: current
        }, () => {
            this.getAllTag()
        })
    }

    onDelTag(id) {
        fetch.post('Tag/Delete', { id }).then(res => {
            this.getAllTag()
        })
    }

    searchAll() {
        this.setState({
            pageIndex: 1
        }, this.getAllTag())
    }

    addTag() {
        // const AddChildModal = Form.create()(props => {
        //     const { form } = props
        //     const { getFieldDecorator } = form;
        //     const { deviceList, signalList, currentTag } = this.state


        //     return (

        //     )
        // })

        // return <AddChildModal />
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const { form } = this.props
        const { tagList, signalList, currentTag, deviceList } = this.state
        const cancelModal = () => {
            form.resetFields()
            this.setState({
                visibleTagModal: false
            })
        }

        const onSaveTag = () => {
            form.validateFields((err, values) => {
                if (!err) {
                    console.log(values);
                    let url = '';
                    if (values.id) {
                        url = 'Tag/Edit'
                    } else {
                        url = 'Tag/Add'
                    }
                    fetch.post(url, values).then(res => {
                        this.getAllTag()
                        form.resetFields()
                        this.setState({
                            visibleTagModal: false
                        })
                    })
                }
            })
        }

        const changeCheckbox = (e) => {
            const { currentTag } = this.state
            console.log(e);
            currentTag.isShowChart = !e.target.value
            this.setState({
                currentTag
            })
        }
        const columns = [
            {
                title: '标签名称',
                dataIndex: 'tag'
            },
            {
                title: '设备名称',
                dataIndex: 'deviceName'
            },
            {
                title: '信号名称',
                dataIndex: 'signNo'
            },
            {
                title: '是否显示曲线图',
                render: item => (
                    item.isShowChart ? <span>是</span> : <span  >否</span>
                )
            },
            {
                title: '操作',
                width: 100,
                render: item => (
                    <Row type="flex" justify="space-between" >
                        <Col>
                            <Button type="primary" size="small" icon="form" onClick={this.onEditTag.bind(this, item)}></Button>
                        </Col>
                        <Col>
                            <Popconfirm
                                onConfirm={this.onDelTag.bind(this, item.id)}
                                title="确定删除吗？"
                                okText="删除"
                                cancelText="取消"
                                icon={<Icon type="question-circle-o" style={{ color: 'red' }} />}
                            >
                                <Button type="danger" size="small" icon="delete"></Button>
                            </Popconfirm>
                        </Col>
                    </Row >
                )
            }
        ]
        return (
            <div>
                <h3>设备管理 - 设备标签</h3>
                <Row type="flex">
                    <Col style={{ width: '200px' }} className="m-r-10">
                        <Input placeholder='设备名称' onChange={(e) => { this.searchValueChange(e, 'deviceName') }} />
                    </Col>
                    <Col style={{ width: '200px' }} onChange={(e) => { this.searchValueChange(e, 'deviceItemPropertyName') }} className="m-r-10">
                        <Input placeholder='设备信号' />
                    </Col>
                    <Col className="m-r-10">
                        <Button type="primary" onClick={this.searchAll.bind(this)}>查询</Button></Col>
                    <Col>
                        <Button type="primary" onClick={this.newTag.bind(this)}>新增标签</Button></Col>
                </Row>
                <div style={{ padding: '10px 0px' }}>
                    <Table onChange={this.onTableChange.bind(this)} dataSource={tagList} scroll={{ y: document.body.clientHeight - 260 }} bordered columns={columns} rowKey="id" pagination={{ total: this.state.totalList, pageSize: this.state.pageSize, current: this.state.pageIndex }}></Table>
                </div>
                {
                    this.addTag()
                }
                <Modal title={this.state.modalTitle} cancelText='取消'
                    onCancel={cancelModal}
                    onOk={onSaveTag}
                    okText='确定'
                    visible={this.state.visibleTagModal}>
                    <Form className="login-form">
                        <Form.Item label="id" className="hidden-input">
                            {getFieldDecorator('id', {
                                initialValue: currentTag.id
                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="设备名称"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="标签名称">
                            {getFieldDecorator('tag', {
                                initialValue: currentTag.tag,
                                rules: [{ required: true, message: '标签名称必须输入' }]

                            })(
                                <Input
                                    className="h-40"
                                    type="text"
                                    placeholder="标签名称"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item label="设备名称" >
                            {getFieldDecorator('deviceID', {
                                initialValue: currentTag.deviceID,
                                rules: [{ required: true, message: '设备必须选择' }]
                            })(
                                <Select  >
                                    <Option value=''>请选择设备</Option>
                                    {
                                        deviceList.length &&
                                        deviceList.map(item => {
                                            return <Option key={item.id} value={item.id}>{item.name}</Option>
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item label="设备信号" >
                            {getFieldDecorator('deviceItemPropertyID', {
                                initialValue: currentTag.deviceItemPropertyID,
                                rules: [{ required: true, message: '设别信号必须选择' }]
                            })(
                                <Select  >
                                    <Option value=''>请选择信号</Option>
                                    {
                                        signalList.length &&
                                        signalList.map(item => {
                                            return <Option key={item.id} value={item.id}>{item.signNo}</Option>
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item label="是否显示曲线图">
                            {getFieldDecorator('isShowChart', {
                                initialValue: currentTag.isShowChart
                            })(
                                <Checkbox checked={currentTag.isShowChart} onChange={(e) => { changeCheckbox(e) }} />
                            )}
                        </Form.Item>
                    </Form>
                </Modal >
            </div>
        );
    }
}

export default Form.create()(DeviceTagPage);